FORMs in Web pages

You are looking at the file LEARNFRM.HTM. Compare this file's appearance displayed by a Web browser versus displayed by a text editor (Windows' Notepad works just as well... that's where we wrote this file in fact). You'll quickly see how HTML FORMs work.

A FORM is a section of a Web page marked off by a beginning tab <FORM> and an ending tab </FORM>. These tabs mark off the boundaries of a single transaction between your Web browser and some Web server. The Web server is identified in the beginning tab by <FORM ACTION="http://web.server.name/gatewayprog/file">. The "gatewayprog" part identifies a gateway program expected to be running on that Web server which will know what to do with the form input when the browser sends it.

In the case of Worldgroup, this gateway program is identified by the word "formfile". This word tells the Worldgroup Web server to write the form's input to the text file whose name follows "formfile/".

Tag elements inside the boundaries of the <FORM></FORM> gather information from the user as values in variables. When the user does something which causes the FORM to submit its data, the variables and their values are transmitted to the gateway program on the Web server named in the <FORM> tag.

The gateway program on that Web server receives the information and acts on it, usually sending a response back to the user's Web browser. That response is usually an entire Web page, automatically generated by the gateway program.

There are several different ways a Web page can gather information from a user. All of these are <INPUT> tags:


Submit-button Input

This button is made by:
<INPUT TYPE="submit" NAME="SubmitVariable" VALUE="Value2Bsubmitted">

A single mouse click depresses this button and causes the FORM to immediately deliver its data. That data will include at least the variable NAMEd by this button (SubmitVariable) and the assigned VALUE of that variable (Value2Bsubmitted). Users cannot change this VALUE.

Keep in mind that some older Web browser programs can handle only one Submit button per form, but newer browsers can handle several. This lets you offer users a one-shot choice between alternatives. For example:

Choose between and
These buttons are made by:
<INPUT TYPE="submit" NAME="SubmitVariable" VALUE="YES"> and
<INPUT TYPE="submit" NAME="SubmitVariable" VALUE="NO">


Image Input

This clickable image is made by:
<INPUT TYPE="image" NAME="MousePosition" SRC="learnwe1.gif">

This is one of the ways you can make clickable image maps. That is, a single mouse click over the area of the image immediately causes the FORM to deliver its data: the location of the mouse pointer at the time of the click, relative to the image's upper left-hand corner, measured in pixels. Two variables are sent: MousePosition.x and MousePosition.y

From these coordinates, a CGI program on the receiving Web server can choose between alternatives. That is, if the coordinates indicate the user clicked over the larger of the two stars, the CGI program could respond differently than if the coordinates indicated the user clicked over the smaller of the two stars.


Text Input

This text box is made by:
<INPUT TYPE="text" NAME="TextVariable" SIZE=37 MAXLENGTH=2049>

A single mouse click within this text box activates a cursor which lets the user type. The box displays only SIZE characters but accepts up to MAXLENGTH characters. If you don't specify MAXLENGTH, there is no limit. When there is only one Text and/or Password Input in a single FORM, pressing ENTER causes the FORM to deliver its data, the NAMEd TextVariable containing the string of characters typed. When more than one is present, ENTER is ignored and a Submit-button Input or other method is needed to cause the FORM to deliver its data. Often, the TAB key can be used to cycle between several Text and/or Password Inputs in a single FORM.


Password Input

This password box is made by:
<INPUT TYPE="password" NAME="PasswordVariable" SIZE=14 MAXLENGTH=20>

This is nearly identical to the Text Input type, except that whatever characters the user types are obscured on his screen, typically by *asterisks*. The choice of obscurity is up to the Web browser program. As with text, when there is only one Text and/or Password Input in a single FORM, pressing ENTER causes the FORM to deliver its data, the NAMEd PasswordVariable containing the string of characters typed. When more than one is present, ENTER is ignored and a Submit-button Input or other method is needed to cause the FORM to deliver its data. Often, the TAB key can be used to cycle between several Text and/or Password Inputs in a single FORM.


Checkbox Input

This checkbox is made by:
<INPUT TYPE="checkbox" NAME="CheckboxVariable" VALUE="BoxWasChecked">

A single mouse click checks, or unchecks, this box. If the box is UNchecked when the FORM delivers its data, this INPUT command will contribute NO data. If the box IS checked when the FORM delivers its data, the NAMEd CheckboxVariable will contain the VALUE BoxWasChecked.


Radio-button Input

This radio button is made by:
<INPUT TYPE="radio" NAME="RadioVariable" VALUE="RadioValue1" CHECKED>

And so is this one
<INPUT TYPE="radio" NAME="RadioVariable" VALUE="RadioValue2">

Both of these Radio Inputs NAME the same RadioVariable, but each has a different VALUE. Within a single FORM, only one Radio button of the same NAME can be selected at a time. When the FORM is told to deliver its data, the Radio button last selected is the one whose VALUE will be delivered in the NAMEd variable.


Hidden Input

This space here{ }is made by:
<INPUT TYPE="hidden" NAME="HiddenVariable" VALUE="PreRecordedValue">

This is not input in the sense of coming from the user's console. It is in fact a way of covertly embedding a variable, and assigning a value to that variable, behind the scenes where users will be unaware of it and unable to examine or change either variable or value. When the FORM delivers its data, this HiddenVariable will contain the VALUE PreRecordedValue.


Reset-button Input

This button is made by:
<INPUT TYPE="reset" VALUE="Reset to default values">

A single mouse click depresses this button, returning all variables in this FORM to their default VALUEs.




www@gcomm.com
Copyright © 1995 Galacticomm, Inc. All Rights Reserved.